<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改地址</title>
    <link rel="stylesheet" href="../static/css/updateAddress.css">
    <script src="../static/js/jQuery_3.7.1.js"></script>
    <script language="javascript" src="../static/js/pcasunzip.js" charset="gb2312"></script>
</head>
<body>
<div id="overlay">
    <div id="addressForm">
        <span id="closeButton">×</span>
        <h1>编辑收货地址</h1>
        <form action="updateAddressServlet" method="post">
            <table>
                <tr>
                    <td>收货人</td>
                    <td><input type="text" name="username" placeholder="请填写收货人姓名" value="${address.name}">
                        <input type="hidden" name="id" value="${address.id}">
                    </td>
                </tr>
                <tr>
                    <td>选择地区</td>
                    <td>
                        <select name="province" id="province">
                        </select>
                        <select name="city" id="city">
                           <%-- <option value="${address.city}" selected>${address.city}</option>--%>
                        </select>
                        <select name="county" id="area">
                            <%--<option value="${address.county}" selected>${address.county}</option>--%>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>详细地址</td>
                    <td><input type="text" name="street" placeholder="街道、楼牌号等" value="${address.street}"></td>
                </tr>
                <tr>
                    <td>手机号码</td>
                    <td>
                        <input type="text" name="phone" placeholder="请填写收货人电话号" value="${address.phone}" style="width: 330px">
                        <span id="phoneError" style="color:red; display:none;">格式错误</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <a href="javascript:deleteAddress(${address.id})" class="delete">删除</a>
                        <input type="submit" value="修改地址">
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script>
    $(document).ready(function () {
        // 获取相关元素
        const phoneInput = $("input[name='phone']");
        const phoneError = $("#phoneError");
        const submitButton = $("input[type='submit']");
        const form = $("#addressForm"); // 选择正确的表单元素

        // 验证手机号格式的函数
        function validatePhone() {
            const phonePattern = /^1[3-9]\d{9}$/; // 常见的中国大陆手机号格式
            const phoneValue = phoneInput.val().trim();

            if (!phonePattern.test(phoneValue)) {
                phoneError.show(); // 显示格式错误提示
                submitButton.prop("disabled", true); // 禁用提交按钮
            } else {
                phoneError.hide(); // 隐藏格式错误提示
                submitButton.prop("disabled", false); // 启用提交按钮
            }
        }

        // 在输入时验证手机号格式
        phoneInput.on("input", validatePhone);

        // 初始化时调用验证函数
        validatePhone();

        // 在表单提交时阻止提交，若格式错误
        form.on("submit", function (event) {
            if (submitButton.prop("disabled")) {
                event.preventDefault(); // 禁止提交
            }
        });
    });

</script>
<script src="js/address.js"></script>
<script language="javascript" defer>
    new PCAS("province", "city", "county", "${address.province}", "${address.city}", "${address.county}");
</script>
<script src="js/updateAddress.js"></script>
</body>
</html>
